<template>
  <div class="yy-store-list">
    <!--列表-->
    <div class="yy-store-list-list" v-show="type=='list'">
      <Card>
        <p slot="title">
          <Icon type="md-list" />
          库存清单列表
        </p>
        <Form ref="formInline" :model="formSearch"  inline>
          <FormItem prop="user">
            <Input type="text" v-model="formSearch.itemNum" placeholder="物品编码"></Input>
          </FormItem>
          <FormItem prop="user">
            <Input type="text" v-model="formSearch.itemName" placeholder="物品名称"></Input>
          </FormItem>
          <FormItem prop="user">
            <Select class="select" v-model="formSearch.storageNum" @on-change="changeStorage(formSearch.storageNum,'cangkuA1')" placeholder="请选择仓库" clearable>
							<Option v-for="(dataSt,index) in this.currentList.cangkuA1" :value="dataSt.storageNum" :key="index">{{dataSt.storageName}}</Option>
            </Select>
          </FormItem>
          <FormItem prop="user">
            <Select class="select" v-model="formSearch.localNum" placeholder="请选择库区" clearable>
							<Option v-for="(dataLt,index) in this.currentList.cangkuA11" :value="dataLt.localNum" :key="index">{{dataLt.localName}}</Option>	
            </Select>
          </FormItem>
           <FormItem prop="user">
            <Select class="select" v-model="formSearch.hasNum" placeholder="请选择库存状态" clearable>
              <Option value="0">大于0</Option>
              <Option value="1">小于0</Option>
              <!-- <Option value="3">低于预警</Option>
              <Option value="4">高于预警</Option> -->
            </Select>
          </FormItem>
          <FormItem>
            <div style="width: 56px;">
              <Button type="primary" :loading="loading"  @click="handleSearch()" style="width: 100%">
                <span v-if="!loading">查询</span>
                <span v-else></span>
              </Button>
            </div>
          </FormItem>
          <FormItem>
          <Button type="primary" class="buttonExcel" @click="handlePrint()">打印</Button>
          </FormItem>
          <FormItem>
            <Button type="primary" :loading="loadingExcel" @click="getExcelList()">
            <span v-if="!loadingExcel">导出</span>
            <span v-else></span>
            </Button>
          </FormItem>
        </Form>
        <div class="count">合计： 库存数量：{{inventory.nums}}    金额：{{inventory.amounts}}</div>
        <div class="sub-count">
          当页小计：库存数量：{{pageSubtotal.numTotal}} 金额: {{pageSubtotal.amountTotal}} 
        </div>
        <Table highlight-row stripe :columns="columns" :data="data" ></Table>
        <Table highlight-row stripe :columns="columnsExcel" :data="dataExcel" border ref="tables" style="display: none;"></Table>
        <div style="margin: 10px;overflow: hidden">
          <div style="float: right;">
            <Page :total="page.total" :page-size="page.pageSize" :current="formSearch.pageNum" @on-change="changePage" show-total></Page>
          </div>
        </div>
      </Card>
    </div>
    <!--详情-->
    <div class="yy-store-list-details" v-show="type=='details'">
       <Card>
        <p slot="title">
          <Icon type="md-paper"/>
          查看详情
        </p>
        <p slot="extra">
          <Button type="primary" @click="goBack()">返回</Button>
        </p>
        <div class="details" :data="detailsList">
          <p class="details-title"><span>类别:</span>{{currentData.cateName}}</p>
          <p class="details-title"><span>物品编号:</span>{{currentData.itemNum}}</p>
          <p class="details-title"><span>物品名称:</span>{{currentData.itemName}}</p>
          <p class="details-title"><span>品牌:</span>{{currentData.brand}}</p>
          <p class="details-title"><span>规格:</span>{{currentData.size}}</p>
					<p class="details-title"><span>物品序列号:</span>{{currentData.sn}}</p>
					<p class="details-title"><span>是否耐用:</span>{{currentData.isSpare}}</p>
					<p class="details-title"><span>仓库:</span>{{currentData.storageName}}</p>
					<p class="details-title"><span>库区:</span>{{currentData.localName}}</p>
					<p class="details-title"><span>库存数量:</span>{{currentData.num}}</p>
					<p class="details-title"><span>单价:</span>{{parseInt(currentData.unitPrice)}}</p>
					<p class="details-title"><span>金额:</span>{{parseInt(currentData.amount)}}</p>
					<p class="details-title"><span>品质:</span>{{currentData.batchNum}}</p>
					<p class="details-title"><span>预警下限:</span>{{currentData.minNum}}</p>
					<p class="details-title"><span>预警上限:</span>{{currentData.maxNum}}</p>
        </div>
      </Card>
    </div>
  </div>
</template>

<script>
import API from "./api";
import ValidatorRule from "@/filters/validator-rule";
import { formatNetTime } from "@/libs/tools";
import i18n from "./locale";
import mixinTag from "@/mixin/tag-mixin";
import wareHouseMixin from "../common/warehouse-mixin";

export default {
  name: "yy-store-list",
  mixins: [mixinTag, wareHouseMixin],
  data() {
    return {
      i18n: i18n,
      loading: false,
      loadingExcel: false,
      currentData: "",
      detailsModal: false,
      type: "list",
      page: {
        total: 0,
        pageSize: 20
      },
      pageSubtotal: {
        numTotal: 0,
        amountTotal: 0
      },
      inventory: {
        nums: 0,
        amounts: 0
      },
      formSearch: {
        itemNum: "",
        itemName: "",
        userID: "",
        userName: "",
        b_UserRole: "",
        storageNums: ["1", "2", "3"],
        localNum: "",
        hasNum: "",
        isShowAllSpareItem: 1,
        pageNum: ""
      },
      editFormInLine: {},

      editFormRuleInline: {},

      columns: [
        {
          title: "类别",
          key: "cateName"
        },
        {
          title: "物品编号",
          key: "itemNum"
        },
        {
          title: "物品名称 ",
          key: "itemName"
        },
        {
          title: "品牌 ",
          key: "brand"
        },
        {
          title: "规格 ",
          key: "size"
        },
        {
          title: "物品序列号 ",
          key: "sn"
        },
        {
          title: "是否耐用 ",
          key: "isSpare",
          render: (h, params) => {
            return h("span", params.row.isSpare == 0 ? "否" : "是");
          }
        },
        {
          title: "仓库 ",
          key: "storageName"
        },
        {
          title: "库区 ",
          key: "localName"
        },
        {
          title: "库存数量 ",
          key: "num",
          render: (h, params) => {
            return h("span", parseInt(params.row.num));
          }
        },
        {
          title: "单价(元)",
          key: "unitPrice",
          render: (h, params) => {
            let unitPrice = "";
            if (params.row.num != 0) {
              unitPrice =
                (params.row.amount * 100) / parseInt(params.row.num) / 100;
            } else {
              unitPrice = 0;
            }
            return h("span", unitPrice.toFixed(2));
          }
        },
        {
          title: "金额(元)",
          key: "amount"
        },
        {
          title: "品质 ",
          key: "batchNum"
        },
        {
          title: "预警下限 ",
          key: "minNum"
        },
        {
          title: "预警上限 ",
          key: "maxNum"
        },
        {
          title: "操作",
          key: "action",
          width: 180,
          align: "center",
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "primary",
                    size: "small"
                  },
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {
                      this.details(params.index);
                    }
                  }
                },
                "查看"
              )
            ]);
          }
        }
      ],
      data: [],
      detailsList: [],
      columnsExcel: [
        {
          title: "类别",
          key: "cateName"
        },
        {
          title: "物品编号",
          key: "itemNum"
        },
        {
          title: "物品名称 ",
          key: "itemName"
        },
        {
          title: "品牌 ",
          key: "brand"
        },
        {
          title: "规格 ",
          key: "size"
        },
        {
          title: "物品序列号 ",
          key: "sn"
        },
        {
          title: "是否耐用 ",
          key: "isSpare",
          render: (h, params) => {
            return h("span", params.row.isSpare == 0 ? "否" : "是");
          }
        },
        {
          title: "仓库 ",
          key: "storageName"
        },
        {
          title: "库区 ",
          key: "localName"
        },
        {
          title: "库存数量 ",
          key: "num",
          render: (h, params) => {
            return h("span", parseInt(params.row.num));
          }
        },
        {
          title: "单价(元)",
          key: "unitPrice",
          render: (h, params) => {
            let unitPrice = "";
            if (params.row.num != 0) {
              unitPrice =
                (params.row.amount * 100) / parseInt(params.row.num) / 100;
            } else {
              unitPrice = 0;
            }
            return h("span", unitPrice.toFixed(2));
          }
        },
        {
          title: "金额(元)",
          key: "amount"
        },
        {
          title: "品质 ",
          key: "batchNum"
        },
        {
          title: "预警下限 ",
          key: "minNum"
        },
        {
          title: "预警上限 ",
          key: "maxNum"
        }
      ],
      dataExcel: []
    };
  },

  mounted() {
    this.userInfo = this.$store.state.user.userInfo;
    this.handleSearch();
  },

  activated() {},

  computed: {},

  methods: {
    resetInit() {
      this.handleSearch();
      this.type = "list";
    },

    handleSearch() {
      let obj = this.formSearch;
      obj.pageNum = 1;
      obj.pageSize = this.page.pageSize;
      this.formSearch = obj;
      this.getList(obj);
    },

    getList(obj) {
      this.loading = true;
      API.getList(obj)
        .then(res => {
          if (res.code == 200) {
            this.loading = false;
            let data = res.data;
            if (data != null) {
              this.page.total = data.total;
              this.page.pageSize = data.pageSize;
              this.data = data.list;
              this.inventory = data.dataInfo;
              this.thisinventory();
              this.thisPageSubtotal();
            } else {
              this.$Message.success({ content: "暂无数据！" });
              this.data = [];
              this.page.total = 0;
              this.inventory = [];
              this.pageSubtotal.numTotal = "";
              this.pageSubtotal.amountTotal = "";
            }
          }
        })
        .catch(err => {
          this.$Message.error("请求异常！");
          console.log("getList", err);
        });
    },

    changePage(pageNum) {
      let obj = this.formSearch,
        maxPageNum = Math.ceil(this.page.total / this.page.pageSize);
      if (obj.pageNum > maxPageNum) {
        obj.pageNum = maxPageNum;
      } else {
        obj.pageNum = pageNum;
      }
      this.formSearch = obj;
      this.getList(obj);
    },

    goBack() {
      this.type = "list";
    },

    thisinventory() {
      this.inventory.nums = parseInt(this.inventory.nums);
      this.inventory.amounts = this.inventory.amounts.toFixed(2);
    },

    thisPageSubtotal() {
      let obj = {
        numTotal: 0,
        amountTotal: 0
      };
      for (let i in this.data) {
        obj.numTotal += parseInt(this.data[i].num);
        obj.amountTotal += this.data[i].amount;
      }
      obj.amountTotal = obj.amountTotal.toFixed(2);
      this.pageSubtotal = obj;
    },

    details(index) {
      let tthis = this;
      this.type = "details";
      this.currentData = _.clone(this.data[index]);
      this.currentData.num = parseInt(this.currentData.num);
      let unitPrice = "";
      if (this.currentData.num != 0) {
        unitPrice =
          (this.currentData.amount * 100) / this.currentData.num / 100;
      } else {
        unitPrice = 0;
      }
      this.$set(this.currentData, "unitPrice", unitPrice);
      if (this.currentData.isSpare == 0) {
        this.currentData.isSpare = "否";
      } else {
        this.currentData.isSpare = "是";
      }
    },

    handlePrint() {
      window.print();
    },

    getExcelList() {
      let obj = _.clone(this.formSearch);
      obj.pageNum = 1;
      obj.pageSize = this.page.total;
      console.log("导出数据的条数", obj.pageSize);
      if (this.loadingExcel == false) {
        this.getListA(obj);
      }
    },

    getListA(obj) {
      this.loadingExcel = true;
      API.getList(obj)
        .then(res => {
          if (res.code == 200) {
            this.loadingExcel = false;
            let data = res.data;
            if (data != null) {
              this.dataExcel = data.list;
              this.durableExcel();
              this.handleExcel();
            } else {
              this.$Message.success({ content: "暂无数据！" });
              this.dataExcel = [];
            }
          }
        })
        .catch(err => {
          this.$Message.error("请求异常！");
          console.log("getListA", err);
        });
    },

    handleExcel() {
      this.$refs.tables.exportCsv({
        filename: "库存清单数据",
        columns: this.columnsExcel,
        data: this.dataExcel
      });
      this.$Message.success({ content: "导出Excel成功！" });
      this.dataExecl = [];
    },

    durableExcel() {
      for (let i = 0; i < this.dataExcel.length; i++) {
        if (this.dataExcel[i].isSpare == 0) {
          this.dataExcel[i].isSpare = "否";
        } else {
          this.dataExcel[i].isSpare = "是";
        }
      }
    }
  }
};
</script>
<style lang="less" >
@import "./yy-store-list.less";
</style>
